<template>
    <div class="container">
        <div class="btn-container">
            <el-button @click="editMessage">编辑患者信息</el-button>
        </div>
        <div class="tab">基本信息</div>
        <div class="card-container">
              <div class="card-left">
                  <img src="@/assets/img/user.jpg" width="80px" height="80px" />
              </div>
              <div class="card-right">
                  <el-row style="margin-bottom: 10px">
                      <el-col :span="5">姓名:{{ patientData.patientName }}</el-col>
                      <el-col :span="4">性别:{{ patientData.gender == 1 ? "男" : "女" }}</el-col>
                      <el-col :span="4">出生日期:{{ patientData.birth }}</el-col>
                      <el-col :span="6">身份证号:{{ patientData.idCard }}</el-col>
                      <el-col :span="5">婚姻状况:{{ maritalStatus }}</el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="5">手机号:{{ patientData.phone }}</el-col>
                    <el-col :span="4">文化程度:{{ education }}</el-col>
                    <el-col :span="4">民族:{{ ethnicGroup }}</el-col>
                   <el-col :span="6">血型:{{ bloodType }}</el-col>
                    <el-col :span="5">职业:{{ occupation }}</el-col>
                  </el-row>
              </div>
        </div>
        <div class="tab">健康信息</div>
        <div class="card-container-bottom">
            <div>
                过敏史:<span v-for="item in allergyData" :key="item">{{ item }}、</span>
            </div>
            <div>
                暴露史:<span v-for="item in exposeData" :key="item">{{ item }}、</span>
            </div>
            <div>
                既往史:<span v-for="item in pastData" :key="item">{{ item }}、</span>
            </div>
            <div>
                家族史:<span v-for="item in familyData" :key="item">{{ item }}、</span>
            </div>
            <div>
                遗传病史:<span v-for="item in geneticData" :key="item">{{ item }}、</span>
            </div>
            <div>
                残疾情况:<span v-for="item in disabilityData" :key="item">{{ item }}、</span>
            </div>
            <div>
                备注:{{ patientData.remark }}
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { useRoute, useRouter } from "vue-router";
    import { useStore } from "vuex";
    import { ref, reactive, computed, onMounted } from "vue";
    import { getPatientMessage } from "@/api/patient/index";
    import { IPatientMessageResponse } from "@/types/api";
    import {IPatientMessageResult,IHealthType} from '@/types/patient'
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const patientId = ref("") ;
    patientId.value = route.query.patientId as string;
    const patientData = ref<IPatientMessageResult>({
        patientName: '',
        gender: 0,
        birth: '',
        idCard: '',
        maritalStatus: '',
        phone: '',
        education: '',
        ethnicGroup: '',
        bloodType: '',
        occupation: '',
        allergyHistory: '',
        disabilityHistory: '',
        exposureHistory: '',
        familyHistory: '',
        geneticHistory: '',
        pastHistory: '',
        remark: ''
    });
    const editMessage = () => {
        store.commit("updateTitle", "编辑患者信息");
        router.push({ path: "editPatient", query: { patientId: patientId.value } });
    };
    const maritalStatusData = reactive([
        {
            value: 0,
            label: "已婚",
        },
        {
            value: 1,
            label: "未婚",
        },
        {
            value: 2,
            label: "丧偶",
        },
        {
            value: 3,
            label: "离婚",
        },
        {
            value: 4,
            label: "未说明的婚姻状态",
        },
    ]);
    let maritalStatus = computed(() => {
        if (JSON.stringify(patientData.value) === "{}") {
            return "";
        } else {
            if(patientData.value.maritalStatus === -1){
                return ''
            }else{
                const statusItem :any= maritalStatusData.find((item) => item.value == patientData.value.maritalStatus);
                return statusItem.label;
            }
        }
    });
    const educationData = reactive([
        {
            value: 0,
            label: "小学",
        },
        {
            value: 1,
            label: "初中",
        },
        {
            value: 2,
            label: "高中",
        },
        {
            value: 3,
            label: "专科",
        },
        {
            value: 4,
            label: "本科",
        },
        {
            value: 5,
            label: "硕士及以上",
        },
        {
            value: 6,
            label: "其他",
        },
  ]);
    let education = computed(() => {
        if (JSON.stringify(patientData.value) === "{}") {
            return "";
        } else {
            if(patientData.value.education === -1){
                return ''
            }else{
                const statusItem:any = educationData.find((item) => item.value == patientData.value.education);
                return statusItem.label;
            }
           
        }
    });
    const ethnicGroupData = reactive([
        {
            value: 0,
            label: "汉族",
        },
        {
            value: 1,
            label: "少数民族",
        },
    ]);
    let ethnicGroup = computed(() => {
        if (JSON.stringify(patientData.value) === "{}" ) {
            return "";
        } else {
            if(patientData.value.ethnicGroup === -1){
                return ''
            }else{
                const statusItem:any = ethnicGroupData.find((item) => item.value == patientData.value.ethnicGroup);
                return statusItem.label;
            }   
        }
      });
    const bloodTypeData = reactive([
        {
            value: 0,
            label: "A型",
        },
        {
            value: 1,
            label: "B型",
        },
        {
            value: 2,
            label: "O型",
        },
        {
            value: 3,
            label: "AB型",
        },
        {
            value: 4,
            label: "RH阴性",
        },
        {
            value: 5,
            label: "RH阳性",
        },
        {
            value: 6,
            label: "RH不详",
        },
        {
            value: 6,
            label: "不详",
        },
    ]);
    let bloodType = computed(() => {
        if (JSON.stringify(patientData.value) === "{}" ) {
            return "";
        } else {
            if(patientData.value.bloodType === -1){
                return ''
            }
            else{
                const statusItem:any = bloodTypeData.find((item) => item.value == patientData.value.bloodType);
            return statusItem.label;
            }    
        }
    });
    const occupationData = reactive([
        {
            value: 0,
            label: "国家机关、党群组织、企业、事业单位负责人",
        },
        {
            value: 1,
            label: "专业技术人员",
        },
        {
            value: 2,
            label: "办事人员和有关人员",
        },
        {
            value: 3,
            label: "商业、服务业人员",
        },
        {
            value: 4,
            label: "农、林、牧、渔、水利业生产人员",
        },
        {
            value: 5,
            label: "生产、运输设备操作人员及有关人员",
        },
        {
            value: 6,
            label: "军人",
        },
        {
            value: 7,
            label: "不便分类的其他从业人员",
        },
        {
            value: 8,
            label: "学生",
        },
        {
            value: 9,
            label: "无职业",
        },
    ]);
    let occupation = computed(() => {
        if (JSON.stringify(patientData.value) === "{}" ) {
            return "";
        }else{
            if(patientData.value.occupation === -1){
                return ''
            }else{
                const statusItem :any= occupationData.find((item) => item.value == patientData.value.occupation);
               return statusItem.label;
            }
        }
    });
    let allergyData = reactive([]);
    let exposeData = reactive([]);
    let pastData = reactive([]);
    let familyData = reactive([]);
    let geneticData = reactive([]);
    let disabilityData = reactive([]);
    //将数据的checked对应值为true的name放入数组中
    const formatData = (inputValue:IHealthType[], paramsData:string[]) => {
        inputValue.forEach((item:IHealthType ) => {
            if (typeof item === "object" && item.hasOwnProperty("checked")) {
                if (item.checked && item.name !== "其他") {
                    paramsData.push(item.name);
                }
            } else if (typeof item === "object" && item.hasOwnProperty("remark")) {
                if (item.remark) {
                  paramsData.push(item.remark);
                }
            }
        });
        paramsData.forEach((item: string, index: number) => {
            if (item == "有") {
                paramsData.splice(index, 1);
            }
            if (item == "其他残疾") {
                paramsData.splice(index, 1);
            }
        });
        paramsData = [...new Set(paramsData)];
    };
    const toParse = () => {
        formatData(JSON.parse(patientData.value.allergyHistory), allergyData);
        formatData(JSON.parse(patientData.value.exposureHistory), exposeData);
        formatData(JSON.parse(patientData.value.pastHistory), pastData);
        formatData(JSON.parse(patientData.value.familyHistory), familyData);
        formatData(JSON.parse(patientData.value.geneticHistory), geneticData);
        formatData(JSON.parse(patientData.value.disabilityHistory), disabilityData);
    };
    onMounted(async () => {
        store.commit("updateTitle", "患者信息");
        const res: IPatientMessageResponse = await getPatientMessage(patientId.value);
        patientData.value = res.data.result;
        toParse();
    });
</script>
<style lang="scss" scoped>
  .container {
    .btn-container {
      display: flex;
      justify-content: flex-end;
    }

    .card-container {
      padding: 10px;
      display: flex;
      padding-right: 0;

      .card-left {
        width: 80px;
        margin-right: 30px;
      }

      .card-right {
        padding-top: 10px;
        padding-bottom: 10px;
        flex: 1;
      }
    }

    .card-container-bottom {
      padding: 10px;
      padding-right: 0px;
      display: flex;
      flex-direction: column;

      div {
        margin-bottom: 30px;
      }
    }

    .tab {
      margin-bottom: 10px;
      border-left: 3px solid rgb(8, 79, 222);
      padding-left: 20px;
    }
  }
</style>